﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> </title>
    <!-- 引入样式 -->

    @* <script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.min.js"></script> *@
    <script src="~/lib/vue.global.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css">
    <script src="//unpkg.com/element-plus"></script>

    <style>
        a {
            text-decoration: none; /* 去除下划线 */
        }
        /* 添加页面背景色 */
        body {
            background-color: #FFFFCC; /* 示例浅灰色，可替换为你的图片主色值 */
        }

        .el-table {
            background-color: white; /* 表格白底，与背景色区分 */
        }
    </style>

</head>
<body>

    <!-- Vue 挂载点 -->
    <div id="app">
        <span>您正在做的业务是：人力资源--人力资源档案管理--人力资源档案恢复</span><br />
        <span>  符合条件的人力资源档案总数：{{ rows }}例</span>




        <el-table :data="tableData" style="width: 100%">
            <el-table-column label="档案编号" width="150">

                <template #default="scope">
                    <a :href="getDetailUrl(scope.row.huf_id)">
                        {{ scope.row.human_id }}

                    </a>
                </template>

            </el-table-column>
            <el-table-column prop="human_name" label="姓名" width="150"></el-table-column>
            <el-table-column prop="human_sex" label="性别" width="150"></el-table-column>
            <el-table-column prop="first_kind_name" label="I级机构" width="150"></el-table-column>
            <el-table-column prop="second_kind_name" label="II级机构" width="150"></el-table-column>
            <el-table-column prop="third_kind_name" label="III级机构" width="150"></el-table-column>
            <el-table-column prop="human_major_kind_name" label="职位分类" width="150"></el-table-column>
            <el-table-column prop="hunma_major_name" label="职位名称" width="150"></el-table-column>
        </el-table>

        <!-- 分页控件 -->
        <el-pagination v-on:size-change="handleSizeChange"
                       v-on:current-change="handleCurrentChange"
                       :current-page="currentPage"
                       :page-sizes="[1, 2, 3, 4]"
                       :page-size="pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="rows">
        </el-pagination>


    </div>




    <script type="text/javascript">
        const { createApp, ref, onMounted } = Vue;
        const app = createApp({
            setup() {

            const tableData = ref([]);

                   //当前页
            const currentPage = ref(1);
            //每页显示数
            const pageSize = ref(2);
            //总行数
            const rows = ref(0);


            // 页面加载时执行
            onMounted(() => {
                // 从URL参数中获取传递的值
                const urlParams = new URLSearchParams(window.location.search);

                // 获取并设置pageSize和currentPage
                if (urlParams.get('pageSize')) {
                    pageSize.value = parseInt(urlParams.get('pageSize'));
                     console.log('从URL获取pageSize:', pageSize.value);
                }

                if (urlParams.get('currentPage')) {
                    currentPage.value = parseInt(urlParams.get('currentPage'));
                     console.log('从URL获取currentPage:', currentPage.value);
                }




               // 加载数据
               fill();
            });


              function fill() {
                axios.get('/DASC/DAFHKC1',{
                     params:{
                        currentPage: currentPage.value,
                        pageSize: pageSize.value
                    }
                })
                .then(res => {
                    console.info(res.data);
                    tableData.value = res.data.list;
                    rows.value = res.data.rows;
                }).catch(err => {
                    console.info(err)
                })

              }


                    // 生成详情页URL
                const getDetailUrl = (huf_id) => {
                    // 保存当前分页信息，以便返回时恢复
                    sessionStorage.setItem('currentPage', currentPage.value);
                    sessionStorage.setItem('pageSize', pageSize.value);

                    // 构建详情页URL，携带档案ID参数
                    return `/DASC/DAFHCXXS?id=${huf_id}`;
                };



               function handleSizeChange(size) {
                pageSize.value = size;
                fill();
            }

            function handleCurrentChange(cpage) {
                currentPage.value = cpage;
                fill();
            }




                return {
                    tableData,
                    fill,
                    rows,
                    pageSize,
                    currentPage,
                    handleSizeChange,
                    handleCurrentChange,
                    getDetailUrl,
                };


            }
        });


         app.use(ElementPlus).mount('#app');

    </script>
</body>
</html> 